import Gantt from '@/components/Gantt';
import {queryGanttData} from '@/services/ganntData/testDataService'

import React from 'react'

import { PageContainer } from '@ant-design/pro-layout';
import { await } from '@umijs/deps/compiled/signale';
import { message, Radio } from 'antd';
import { json } from 'express';
import { useState } from 'react';
import { useEffect } from 'react';
import { Button } from 'antd';
import { useCallback } from 'react';
import { useRef } from 'react';
// import { gantt } from 'dhtmlx-gantt';

//   这里的代码  应该和import的作用差不多，只是这里的代码不能重用
const data1 = {
    data: [
        { id: 1, text: 'Task #1', start_date: '15-04-2019 16:00', duration: 3, progress: 0.6 },
        { id: 2, text: 'Task #2', start_date: '18-04-2019 17:00', duration: 3, progress: 0.4 }
    ],
    links: [
        { id: 1, source: 1, target: 2, type: '0' }
    ]
}

interface Foo {
    type: 'foo'
  }
  
  interface Bar {
    type: 'bar'
  }

  interface Car {
    type: 'car'
    name?:string
  }
  
  type all = Foo | Bar|Car
  
  function handleValue(val: all) {
    switch (val.type) {
      case 'foo':
        // 类型收窄：val 被收窄为 'Foo'
        console.log("类型收窄：val 被收窄为 'Foo'");
        break
      case 'bar':
        // 类型收窄：val 被收窄为 'Bar'
        console.log("类型收窄：val 被收窄为 'Bar':"+val.type);
        break
        case 'car':
          break
      default:
        // val 为 never 类型
        console.log("类型收窄：val 被收窄为 'never'，不是never编译报错 ");
        const neverValue: never = val
        break
    }
  }
  
const vbar:Bar={type:'bar'}
const vfoo:Foo={type:'foo'}
const vtest:Car={type:'car',name:'汽车'}

console.log('components wai..............')
const GantMap: React.FC<{}> = () => {

    handleValue(vbar);
    handleValue(vfoo);
    handleValue(vtest);
     const [dataT,setDataT]=useState({});

     const [numb,setNumb]=useState<number>(1);


    // queryGanttData().then((x)=>{
    //     console.log(x);
    //     // setDataT(x);
    //     console.log('end');
    //     }).finally(()=>{
    //         console.log('finally');
    //     });

//     const callbackDemo = React.useCallback(async () => {
//         const response = await queryGanttData();
//         console.log('response---> '+JSON.stringify(response));
//         return response;
//       }, [queryGanttData])
// var ddd=callbackDemo();
//       console.log(ddd);
//       console.log('callbackDemoend');


useEffect(()=>{
    queryGanttData().then((x)=>{
         setDataT(x);
        }).finally(()=>{
            console.log('finally');
        });
},[]);

// useCallback(()=>{
//     queryGanttData().then((x)=>{
//          setDataT(x);
//         }).finally(()=>{
//             console.log('finally');
//         });
// },[]);

// 泛型接口         begin
function identity<T>(arg: T): T {
    return arg;
}

// let myIdentity: <T>(arg: T) => T = identity;

// let myIdentity: {<T>(arg: T): T} = identity;

// 这只是一个数据类型（函数类型），所以可以赋值
let myIdentity: <T>(arg: T) => T ;
let myIdentity2: {<T>(arg: T): T}

// 具体的函数，就可以调用函数了
myIdentity=identity;

//具体调用 和函数一样，因为他就是个函数
console.log('jieguo:'+myIdentity('aaaaaa'));

// 泛型接口         end


const inputEle=useRef();


const btnHand=()=>{
  
    setNumb(numb+1)
    if(inputEle.current.type=='text')
    inputEle.current.type='radio'
    else
    inputEle.current.type='text'

    // console.log(inputEle.current.type)

}

    return (
        <PageContainer>
<div className="gantt-container">
<Gantt tasks={dataT}></Gantt>
</div>
<hr/>

<input ref={inputEle} type='text'  value={numb}></input>
<Button type='primary' shape='circle' onClick={btnHand}>点我</Button>
        </PageContainer>
    );
}

export default GantMap;
